<script setup>
//导入子组件(父传子)
import SonCom from './ActicleNewsSon.vue'
import { ref } from 'vue'
import { computed } from 'vue';
//响应式数据(父传子)
const count = ref(100)


const  list  =ref([1,2,3,4,5,6,7,8]);

const computedList = computed(()=>{
    return list.value.map(item=>{
        return item*2;
    })
})

</script>

<template>
   <div class="div1">
     <div class="div2"> 响应式数组 {{list}} </div>
     <div class="div2"> 计算数组{{ computedList }} </div>
     <div class="div2"> ssss</div>
     <div class="div2">sssss </div>
     <!-- message  写死的数据  count  响应式数据 -->
     <div class="father">  父组件 <SonCom :count="count" message = "father  message (父传子)"/> </div>
    
  
</div>
 
</template>

<style lang="scss" scoped>
.div1 {
    width: 1280px;
    height: 100% ;
    background-color: rgb(233, 204, 209);
    display: flex;
    //居中
    margin: 0 auto;
}
.div2 {
    //边框
    border: 1px solid rgb(230, 191, 191);
    //右边距
    margin-right: 2px;
   
    width: 200px;
    height: 200px;
    background-color: rgb(237, 243, 243);
}

</style>